<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">

    <head th:include="include :: header"></head>

    <!--360浏览器优先以webkit内核解析-->
    <title>信工校区</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
    <link th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
    <style scoped="scoped" type="text/css">
        *{
            margin:0;
            padding:0;
        }
        .header_div{
            margin-right:20px;
            width:31.2%;
            height: 400px;
        }
        /*最上面的标签卡*/
        .tag_count{
            font-size:2em;
            width:23%;
            height: 120px;
        }

        /*中间的选项卡*/
        .zhong1_tu{
            width:31.2%;
            height: 400px;
        }

        .zhong1_tu{
            width:31.2%;
            height: 300px;
        }

        .icon{
            font-size:2em;
            padding-right:2%;

        }
        .bottom_chart{
            width:97.2%;
            height: 350px;
        }

    </style>
</head>
<body class="gray-bg">
    <div class="container-div ui-layout-center">
        <div class="col-md-12">
            <div class="row">

                <!-- 头部 -->
                <div class="col-md-3 search-collapse header_div tag_count" th:each="count : ${countInfo}">
                    <div style="width:48%;float: left">
                        <div style="font-size:2em;text-align: center;height: 90%" th:text="${count.count}"></div>
                        <div style="font-size:0.6em;color:gray;text-align: center;" th:text="${count.name}"></div>
                    </div>
                    <div  style="width:48%;float: right;text-align: center;" class="icon"><i style="color: #5470c6;" class="fa fa-envira"></i></div>
                </div>
            </div>
        </div>

        <!-- 中间1 -->
        <div class="col-sm-12">
            <div class=row>
                <div id="mainzuo" class="col-sm-3 search-collapse header_div zhong_tu"> </div>
                <div id="mainzhong"  class="col-sm-3 search-collapse header_div zhong_tu" > </div>
                <div id="mainyou"  class="col-sm-3 search-collapse header_div zhong_tu" > </div>
            </div>
        </div>
        <!--中间2-->
        <div class="col-sm-12 zhong2">
            <div class=row>
                <div id="mainzuo1" class="col-sm-3 search-collapse header_div zhong1_tu"> </div>
                <div id="mainzhong1"  class="col-sm-3 search-collapse header_div zhong1_tu" > </div>
                <div id="mainyou1"  class="col-sm-3 search-collapse header_div zhong1_tu" > </div>
            </div>
        </div>

        <!--底部 -->
        <div class="col-sm-12 zhong2">
            <div class=row>
                <div id="boottm_chart_tu" class="col-sm-3 search-collapse header_div bottom_chart ">

                </div>

            </div>
        </div>
    </div>

<div th:include="include :: footer"></div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/laydate/laydate.js}"></script>
<script th:src="@{/chart/echarts.min.js}"></script>
<script type="text/javascript">

   $(function(){
       layer.msg('<span style="color:red;">温馨提示：尽量不要使用360浏览器</span>', {icon: 6});
   })
  // 基于准备好的dom，初始化echarts实例
  var mainzuo = document.getElementById("mainzuo");     //左边
  var mainzhong = document.getElementById("mainzhong"); //中间
  var mainyou = document.getElementById("mainyou"); //
  var mainzuoChart = echarts.init(mainzuo);     //mainzuo, 'dark'是暗黑模式
  var mainzhongChart = echarts.init(mainzhong);
  var mainyouChart = echarts.init(mainyou);




  var  optionZuo = {
     /* backgroundColor: '#0f375f',*/
      title: {
          text: '18级部卫生预览',
          textStyle: {
              fontSize: 14/*,
              color:'white'*/
          }
      },
      tooltip: {
          show:true,
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
      },
      toolbox:{
          show: true,
          feature: {
              dataZoom: {
                  yAxisIndex: "none"
              },
              dataView: {
                  readOnly: false
              },
              magicType: {
                  type: ["line", "bar"]
              },
              restore: {},
              saveAsImage: {}
          }
      },
      xAxis: {
          type: 'category',
          data: ['1班', '2班', '3班', '4班', '5班', '6班']/*,
          axisLine: {
              lineStyle: {
                  color: '#ccc'
              }
          }*/
      },
      yAxis: {
          type: 'value'/*,
          axisLine: {
              lineStyle: {
                  color: '#ccc'
              }
          }*/
      },
      series: [{
          data: [{
              value: 10,
              itemStyle: {
                  color: '#a90000',
              }
          }, {
              value: 10,
              itemStyle: {
                  color: '#FAC858',
              }
          }, {
              value: 9,
              itemStyle: {
                  color: '#91CC75',
              }
          }, {
              value: 8,
              itemStyle: {
                  color: '#5C7BD9',
              }
          }, {
              value: 6,
              itemStyle: {
                  color: '#EE6666',
              }
          }, {
              value: 6,
              itemStyle: {
                  color: '#73C0DE',
              }
          }],
          type: 'bar',
          label:{
              show:true,
              position:'top',

          }
      }]
  };
  var  optionZhong = {
     /* backgroundColor: '#0f375f',*/
      title: {
          text: '19级部卫生预览',
          textStyle: {
              fontSize: 14/*,
              color:'white'*/
          }
      },
      tooltip: {
          show:true,
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
      },
      toolbox:{
          show: true,
          feature: {
              dataZoom: {
                  yAxisIndex: "none"
              },
              dataView: {
                  readOnly: false
              },
              magicType: {
                  type: ["line", "bar"]
              },
              restore: {},
              saveAsImage: {}
          }
      },
      xAxis: {
          type: 'category',
          data: ['1班', '2班', '3班', '4班', '5班', '6班']/*,
          axisLine: {
              lineStyle: {
                  color: '#ccc'
              }
          }*/
      },
      yAxis: {
          type: 'value'/*,
          axisLine: {
              lineStyle: {
                  color: '#ccc'
              }
          }*/
      },
      series: [{
          data: [{
              value: 8,
              itemStyle: {
                  color: '#a90000',
              }
          }, {
              value: 9,
              itemStyle: {
                  color: '#FAC858',
              }
          }, {
              value: 9,
              itemStyle: {
                  color: '#91CC75',
              }
          }, {
              value: 10,
              itemStyle: {
                  color: '#5C7BD9',
              }
          }, {
              value: 6,
              itemStyle: {
                  color: '#EE6666',
              }
          }, {
              value: 7,
              itemStyle: {
                  color: '#73C0DE',
              }
          }],
          type: 'bar',
          label:{
              show:true,
              position:'top',

          }
      }]
  };
  var  optionYou = {
    /*  backgroundColor: '#0f375f',*/
      title: {
          text: '20级部卫生预览',
          textStyle: {
              fontSize: 14/*,
              color:'white'*/
          }
      },
      tooltip: {
          show:true,
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
      },
      toolbox:{
          show: true,
          feature: {
              dataZoom: {
                  yAxisIndex: "none"
              },
              dataView: {
                  readOnly: false
              },
              magicType: {
                  type: ["line", "bar"]
              },
              restore: {},
              saveAsImage: {}
          }
      },
      xAxis: {
          type: 'category',
          data: ['1班', '2班', '3班', '4班', '5班', '6班']/*,
          axisLine: {
              lineStyle: {
                  color: '#ccc'
              }
          }*/
      },
      yAxis: {
          type: 'value'/*,
          axisLine: {
              lineStyle: {
                  color: '#ccc'
              }
          }*/
      },
      series: [{
          data: [{
              value: 9,
              itemStyle: {
                  color: '#a90000',
              }
          }, {
              value: 7,
              itemStyle: {
                  color: '#FAC858',
              }
          }, {
              value: 6,
              itemStyle: {
                  color: '#91CC75',
              }
          }, {
              value: 8,
              itemStyle: {
                  color: '#5C7BD9',
              }
          }, {
              value: 6,
              itemStyle: {
                  color: '#EE6666',
              }
          }, {
              value: 6,
              itemStyle: {
                  color: '#73C0DE',
              }
          }],
          type: 'bar',
          label:{
              show:true,
              position:'top',

          }
      }]
  };
  // 使用刚指定的配置项和数据显示图表。
  //if (option && typeof option === 'object') {
  mainzuoChart.setOption(optionZuo);
  mainzhongChart.setOption(optionZhong);
  mainyouChart.setOption(optionYou);
  //}


  /**
   * 中间部分的图表
   * @type {HTMLElement}
   */
  var mainzuo1 = document.getElementById("mainzuo1");     //左边
  var mainzhong1 = document.getElementById("mainzhong1"); //中间
  var mainyou1 = document.getElementById("mainyou1"); //
  var mainzuoChart1 = echarts.init(mainzuo1);     //mainzuo, 'dark'是暗黑模式
  var mainzhongChart1 = echarts.init(mainzhong1);
  var mainyouChar1 = echarts.init(mainyou1);

  var option_mainzuo1= {
      title: {
          text: '18级部出勤率',
          left: 'center',
          textStyle: {
              fontSize: 14
          }
      },
      tooltip: {
          trigger: 'item'
      },
      series: [
          {
              name: '出勤率(%)',
              type: 'pie',
              radius: '50%',
              data: [
                  {value: 98, name: '1班'},
                  {value: 96, name: '2班'},
                  {value: 90, name: '3班'},
                  {value: 70, name: '4班'},
                  {value: 86, name: '5班'},
                  {value: 86, name: '6班'}
              ],
              emphasis: {
                  itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
          }
      ]
  };
  option_mainzuo1 && mainzuoChart1.setOption(option_mainzuo1);

  var option_mainzhong1= {
      title: {
          text: '19级部出勤率',
          left: 'center',
          textStyle: {
              fontSize: 14
          }
      },
      tooltip: {
          trigger: 'item'
      },
      series: [
          {
              name: '出勤率(%)',
              type: 'pie',
              radius: '50%',
              data: [
                  {value: 100, name: '1班'},
                  {value: 76, name: '2班'},
                  {value: 80, name: '3班'},
                  {value: 70, name: '4班'},
                  {value: 86, name: '5班'},
                  {value: 100, name: '6班'}
              ],
              emphasis: {
                  itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
          }
      ]
  };
  option_mainzhong1 && mainzhongChart1.setOption(option_mainzhong1);

  var option_mainyou1= {
      title: {
          text: '20级部出勤率',
          left: 'center',
          textStyle: {
              fontSize: 14
          }
      },
      tooltip: {
          trigger: 'item'
      },
      series: [
          {
              name: '出勤率(%)',
              type: 'pie',
              radius: '50%',
              data: [
                  {value: 99, name: '1班'},
                  {value: 96, name: '2班'},
                  {value: 99, name: '3班'},
                  {value: 90, name: '4班'},
                  {value: 100, name: '5班'},
                  {value: 96, name: '6班'}
              ],
              emphasis: {
                  itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
          }
      ]
  };
  option_mainyou1 && mainyouChar1.setOption(option_mainyou1);


  //底部饼图
  var boottm_chart_tu = document.getElementById("boottm_chart_tu");     //左边

  var myChart_bottom = echarts.init(boottm_chart_tu);
  var option_bottom;

  // Generate data
  var category = [];
  var dottedBase = +new Date();
  var lineData = [];
  var barData = [];

  for (var i = 0; i < 20; i++) {
      var date = new Date(dottedBase += 3600 * 24 * 1000);
      category.push([
          date.getFullYear(),
          date.getMonth() + 1,
          date.getDate()
      ].join('-'));
      var b = Math.random() * 200;
      var d = Math.random() * 200;
      barData.push(b)
      lineData.push(d + b);
  }

  // 最下面
  option_bottom = {
      backgroundColor: '#0f375f',
     /* backgroundColor:'white',*/
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'shadow'
          }
      },
      legend: {
          data: ['line', 'bar'],
          textStyle: {
              color: '#ccc'
          }
      },
      xAxis: {
          data: category,
          axisLine: {
              lineStyle: {
                  color: '#ccc'
              }
          }
      },
      yAxis: {
          splitLine: {show: false},
          axisLine: {
              lineStyle: {
                  color: '#ccc'
              }
          }
      },
      series: [{
          name: 'line',
          type: 'line',
          smooth: true,
          showAllSymbol: true,
          symbol: 'emptyCircle',
          symbolSize: 15,
          data: lineData
      }, {
          name: 'bar',
          type: 'bar',
          barWidth: 10,
          itemStyle: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                      {offset: 0, color: '#14c8d4'},
                      {offset: 1, color: '#43eec6'}
                  ]
              )
          },
          data: barData
      }, {
          name: 'line',
          type: 'bar',
          barGap: '-100%',
          barWidth: 10,
          itemStyle: {
              color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                      {offset: 0, color: 'rgba(20,200,212,0.5)'},
                      {offset: 0.2, color: 'rgba(20,200,212,0.2)'},
                      {offset: 1, color: 'rgba(20,200,212,0)'}
                  ]
              )
          },
          z: -12,
          data: lineData
      }, {
          name: 'dotted',
          type: 'pictorialBar',
          symbol: 'rect',
          itemStyle: {
              color: '#0f375f'
          },
          symbolRepeat: true,
          symbolSize: [12, 4],
          symbolMargin: 1,
          z: -10,
          data: lineData
      }]
  };

  option_bottom && myChart_bottom.setOption(option_bottom);


</script>
</body>
</html>